<!--
 * @Description: 
 * @Autor: 赖维健(lwj1994)
 * @Date: 2021-09-28 10:47:21
 * @LastEditors: 赖维健(lwj1994)
 * @LastEditTime: 2021-11-15 19:42:27
-->
<template>
  <div class="grid">
    <div class="grid-item" v-for="(item, index) in list" :key="index" @click="selectTheme(item)">
      <div class="grid-item-top">
        <van-uploader v-if="item.code === 'custom'" :after-read="afterRead">
          <van-icon name="plus" size="28" />
        </van-uploader>
      </div>
      <div class="grid-item-bottom">{{ item.name }}</div>
    </div>
  </div>

  <div v-if="background" class="mainest-color" :style="{ background }">主题色</div>

  <div v-for="(item, index) in colors" :key="index" :style="{ width: '150px', height: '100px', background: item, margin: '10px 0' }">
    {{ item }}
  </div>
</template>

<script>
import { computed, defineComponent, reactive, toRefs } from 'vue'
import { useStore } from 'vuex'
import { setCurrentTheme } from '@/utils/theme'
import themeList from './themeList'

export default defineComponent({
  name: 'setting',

  setup() {
    const store = useStore()

    const state = reactive({
      list: [store.getters.defaultTheme],
      colors: [],
      background: ''
    })

    // 当前激活的主题
    const activeTheme = computed(() => {
      return store.getters.activeTheme
    })

    // 请求主题列表
    const getThemeList = () => {
      Promise.resolve().then(() => {
        state.list = state.list.concat(themeList)
      })
    }

    // 选中主题
    const selectTheme = (params) => {
      setCurrentTheme(params)
    }

    // 选中文件
    const afterRead = file => {
      const img = new Image()
      img.src = file.content
      img.crossOrigin = "anonymous"

      // const colorThief = new ColorThief()

      img.onload = function () {
        // let result = colorThief.getColor(img)
        // let getPalette = colorThief.getPalette(img)
        // state.background = `rgb(${result[0]}, ${result[1]}, ${result[2]})`
        // state.colors = getPalette.map(item => {
        //   return `rgb(${item[0]}, ${item[1]}, ${item[2]})`
        // })
        // const theme = {
        //   name: '自定义',
        //   code: 'custom',
        //   options: {
        //     '--text-color': state.colors[7],
        //     '--body-image': `url(${file.content})`
        //   }
        // }
        // setCurrentTheme(theme)
        themeColor(img, (arr) => {
          state.colors = arr.map(item => {
            return `rgb(${item[0]}, ${item[1]}, ${item[2]})`
          })
          const theme = {
            name: '自定义',
            code: 'custom',
            options: {
              '--text-color': state.colors[7],
              '--body-image': `url(${file.content})`
            }
          }
          setCurrentTheme(theme)
        })
      }
    }

    getThemeList()

    return {
      ...toRefs(state),
      activeTheme,
      selectTheme,
      afterRead
    }
  }
})
</script>

<style lang="less" scoped>
.grid {
  margin: 48px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-row-gap: 70px;
  grid-column-gap: 48px;
  box-sizing: border-box;

  .grid-item-top {
    height: 850px;
    border: 1px solid;
    border-radius: 20px;
  }

  .grid-item-bottom {
    text-align: center;
    font-size: 32px;
  }
}

.van-uploader {
  margin: 0 auto;
  display: block;
  width: 100%;
  height: 100%;
  :deep(.van-uploader__wrapper) {
    width: 100%;
    height: 100%;
    .van-uploader__input-wrapper {
      width: 100%;
      height: 100%;
      text-align: center;
      line-height: 850px;
    }
  }
}

.mainest-color {
  width: 400px;
  height: 400px;
  line-height: 200px;
  border-radius: 200px;
  text-align: center;
  border: 1px solid #fff;
}
</style>